<template>
    <div class="page-container">
        <el-card class="box-card">
            <el-row>
                <el-button size="small" type="primary" @click="addBinding">绑定外部域名</el-button>
            </el-row>
            <div class="table-list">
                <el-table :data="list" class="demo-tabs" size="small">
                    <el-table-column prop="domainName" label="域名" ></el-table-column>
                    <el-table-column prop="hostDomain" label="启用" width="150">
                        <template #default="scope">
                            <el-switch v-model="scope.row.hostDomain" size="small" :active-value="1" :inactive-value="0"
                                :active-text="scope.row.hostDomain == '0' ? '否' : '是'"
                                @change="changeStatus(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="https状态" prop="https" >
                        <template #default="scope">
                            <span v-if="scope.row.https == 1" style="color: green;">已支持https</span>
                            <span v-else style="color: gray;">未支持</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template #default="scope">
                            -
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Message } from '@element-plus/icons-vue'

import api from '/@/api/commonApi'

export default {
    name: 'wechatApplet',
    components: {
        
    },
    setup(props) {
        const router = useRouter()
        const state = reactive({
            addHostStatus: false,
            defaultForm: {},
            list: [],
            current: 1,
            size: 100,
            total: 0,
        })
        // 去绑定域名
        const addBinding = () => {
            state.defaultForm = {}
            router.push({
                path: '/shop/addHostBinding'
            })
        }
        // 进入绑定任务
        const goHostTask = (id) => {
            router.push({
                path: '/shop/addHostBinding',
                query: {
                    id: id
                }
            })
        }
        // 启用主域名
        const changeStatus = (row) => {
            api.startHostName({id: row.id}).then(res => {
                getList()
                ElMessage.success("启用成功，已更改为当前域名")
            })
        }
        // 获取列表
        const getList = () => {
            api.getHostBingidngs({
                current: state.current,
                size: state.size,
            }).then(res => {
                if (res.data.records.length == 0) {
                    presentTask()
                }
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 是否有正在进行的任务
        const presentTask = () => {
            api.getUnderwayHost().then(res => {
                if (res.data != null) {
                    goHostTask(res.data.id)
                }
            })
        }
        // 加载当前页面数据
        const toLoadList = (val) => {
            getList()
        }

        onMounted(() => {
            getList()
            presentTask()
        })
        return {
            ...toRefs(state),
            getList,
            addBinding,
            changeStatus,
            presentTask,
            toLoadList,
            goHostTask,
        }
    }
}
</script>

<style lang="scss" scoped>
.box-card {
    height: 96vh;
}

.demo-tabs{
    margin-top: 20px;
    :deep(.el-table__header-wrapper .el-table__cell) {
        background: var(--el-color-primary-light-9);
        color: var(--next-bg-menuBar-light-1);
    }
}
</style>